<template>
  <div class="app-container">
    <div style="background-color: #1f2d3d;width: 10px;height: 35px;float: left"></div>
    <span style="font-size: 20px;margin-left: 10px">
      日期&nbsp;
      <el-select @change="changeSelect" v-model="resumeDate.selectDate" placeholder="请选择">
        <el-option label="年粒度" value="年粒度"/>
        <el-option label="月粒度" value="月粒度"/>
        <el-option label="周粒度" value="周粒度"/>
        <el-option label="日粒度" value="日粒度"/>
      </el-select>
      &nbsp;&nbsp;
      <el-date-picker
        v-if="resumeDate.selectDate === '年粒度'"
        :editable="false"
        :clearable="false"
        v-model="resumeDate.createDate"
        @change="createTimeChange"
        value-format="yyyy"
        type="year"
        placeholder="选择年">
      </el-date-picker>
      <el-date-picker
        v-if="resumeDate.selectDate === '月粒度'"
        :editable="false"
        :clearable="false"
        v-model="resumeDate.createDate"
        value-format="yyyy-MM-dd"
        @change="createTimeChange"
        type="month"
        placeholder="选择月">
      </el-date-picker>
      <el-date-picker
        v-if="resumeDate.selectDate === '周粒度'"
        :editable="false"
        :clearable="false"
        v-model="resumeDate.createDate"
        value-format="yyyy-MM-dd"
        @change="createTimeChange"
        type="week"
        format="yyyy 第 WW 周"

        placeholder="选择周">
      </el-date-picker>
      <el-date-picker
        v-model="dayCreateDate"
        v-if="resumeDate.selectDate === '日粒度'"
        @change="createTimeChange"
        :editable="false"
        :clearable="false"
        type="daterange"
        start-placeholder="开始日期"
        value-format="yyyy-MM-dd"
        end-placeholder="结束日期">
    </el-date-picker>
    </span>
    <hr>
    <el-row :gutter="24" style="text-align: center;margin-top: 10px">
      <el-col :span="6">
        <el-card shadow="always">
          录入简历数<br>
          {{ itoInfoCountVO.itoResumeCountInfoVO.sumResume }}
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="always">
          初筛人数<br>
          {{ itoInfoCountVO.itoResumeCountInfoVO.screened }}
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="always">
          面试人数<br>
          {{ itoInfoCountVO.itoResumeCountInfoVO.audit }}
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="always">
          录用人数<br>
          {{ itoInfoCountVO.itoResumeCountInfoVO.company }}
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="24" style="text-align: center;margin-top: 10px">
      <el-col :span="6">
        <el-card shadow="always">
          待入职<br>
          {{ itoInfoCountVO.itoEmpCountInfoVO.beemployed }}
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="always">
          已入职<br>
          {{ itoInfoCountVO.itoEmpCountInfoVO.employeds }}
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="always">
          试用<br>
          {{ itoInfoCountVO.itoEmpCountInfoVO.rostertrial }}
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="always">
          淘汰<br>
          {{ itoInfoCountVO.itoEmpCountInfoVO.rosterquit }}
        </el-card>
      </el-col>
    </el-row>
    <div
      id="base-echart"
      class="base-echart"
      style="width: 100%; height: 500%;margin-top: 20px"
    ></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import {countResume, countInfo} from "@/api/system/statistics";

Date.prototype.format = function (fmt) {
  var o = {
    "M+": this.getMonth() + 1, //月份
    "d+": this.getDate(), //日
    "h+": this.getHours(), //小时
    "m+": this.getMinutes(), //分
    "s+": this.getSeconds(), //秒
    "q+": Math.floor((this.getMonth() + 3) / 3), //季度
    "S": this.getMilliseconds() //毫秒
  };
  if (/(y+)/.test(fmt)) {
    fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
  }
  for (var k in o) {
    if (new RegExp("(" + k + ")").test(fmt)) {
      fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    }
  }
  return fmt;
}
export default {
  data() {
    return {
      itoInfoCountVO: {
        itoResumeCountInfoVO: {
          sumResume: 0,
          screened: 0,
          audit: 0,
          company: 0,
        },
        itoEmpCountInfoVO: {
          beemployed: 0,
          employeds: 0,
          rostertrial: 0,
          rosterquit: 0
        }
      },

      chart: null,
      dayCreateDate: undefined,
      resumeDate: {
        selectDate: '年粒度',
        createDate: new Date(new Date()).format("yyyy-MM-dd"),
      }
    }
  },
  created() {
    this.selectResumeCountInfo()
  },
  methods: {
    selectResumeCountInfo() {
      countInfo(this.resumeDate).then(res => {
        this.itoInfoCountVO = res.data
      })
    },
    changeSelect() {
      this.resumeDate.createDate = undefined
    },
    createTimeChange() {
      if (this.resumeDate.selectDate === '日粒度') {
        this.resumeDate.createDate = this.dayCreateDate[0] + ',' + this.dayCreateDate[1]
      }
      this.initChart()
      this.selectResumeCountInfo()
    },
    initChart() {
      this.chart = echarts.init(document.getElementById("base-echart"));
      countResume(this.resumeDate).then(res => {
        this.chart.setOption({
          title: {
            text: '简历录用统计',
            left: 'center'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: res.data.names,
              axisTick: {
                alignWithLabel: true
              }
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: 'Direct',
              type: 'bar',
              barWidth: '50%',
              data: res.data.numbers,
            }
          ]
        });
      })
    }
  },
  mounted() {
    this.initChart();
  }

}
</script>
<style scoped>

</style>
